<template>
	<view >
	<view class="bg">
		<input class="input" v-model="inputValue" />
		<button class="btn" v-on:click="handleAddItem">保存</button>
	</view>	
		<ul>
		  <li v-for="(item,index) of list">{{item}}<a href="#" @click.prevent='delMemo(item.id)'>删除</a></li>
		</ul>
	</view>
</template>

<script>
	export default {
		data(){
		    return{
		        inputValue:"",
		        list:[],
		        index:1
		    }
		},
		methods:{
		    handleAddItem(){
		        this.list.push(this.inputValue)
		        this.inputVslue=""
		    },
			delMemo(id){
				this.list=this.list.filter((item)=>{
					return item.id!=id;
				});
				}
		}
		
	}
</script>

<style>
	.bg{
		height: 5%;
		display: flex;
		
	},
	
	.input{
		width: 80%;
		height: auto;
		border-radius: 20rpx;
		border: 1px solid;
		border-color: rgb(169,166,171);
	},
	.btn{
		width: 20%;
		height: auto;
		background-color: white;
		border-radius: 20rpx;
		border: 1px solid;
	}
</style>
